<template>
  <demoBlock title="基础内置样式" padding>
    <table class="api-table">
      <thead>
        <tr>
          <th>类名</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>vcu-clearfix</td>
          <td>清除浮动</td>
        </tr>
        <tr>
          <td>vcu-fl</td>
          <td>左浮动</td>
        </tr>
        <tr>
          <td>vcu-fr</td>
          <td>右浮动</td>
        </tr>
        <tr>
          <td>vcu-text-left</td>
          <td>居左</td>
        </tr>
        <tr>
          <td>vcu-text-right</td>
          <td>居右</td>
        </tr>
        <tr>
          <td>vcu-text-center</td>
          <td>居中</td>
        </tr>
        <tr>
          <td>w-</td>
          <td>
            预设宽度 包含（100, 120, 150, 200, 250, 300, 350, 400, 500） 单位px
          </td>
        </tr>
        <tr>
          <td>h-</td>
          <td>
            预设高度 包含（100, 120, 150, 200, 250, 300, 350, 400, 500） 单位px
          </td>
        </tr>
        <tr>
          <td>m-</td>
          <td>
            外补白 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>mt-</td>
          <td>
            外补白上 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>mb-</td>
          <td>
            外补白下 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>ml-</td>
          <td>
            外补白左 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>mr-</td>
          <td>
            外补白右 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>mlr-</td>
          <td>
            外补白左右 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200）
            单位px
          </td>
        </tr>
        <tr>
          <td>mtb-</td>
          <td>
            外补白上下 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200）
            单位px
          </td>
        </tr>
        <tr>
          <td>p-</td>
          <td>
            内补白 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>pt-</td>
          <td>
            内补白上 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>pb-</td>
          <td>
            内补白下 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>pl-</td>
          <td>
            内补白左 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>pr-</td>
          <td>
            内补白右 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>ptb-</td>
          <td>
            内补白上下 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200）
            单位px
          </td>
        </tr>
        <tr>
          <td>plr-</td>
          <td>
            内补白左右 预设（5, 10, 15, 20, 25, 30, 35, 40, 50, 100, 200）
            单位px
          </td>
        </tr>
        <tr>
          <td>fs-</td>
          <td>
            字体大小 预设（12, 14, 16, 20, 24, 32, 42, 68, 100, 200） 单位px
          </td>
        </tr>
        <tr>
          <td>white-text</td>
          <td class="white-text" style="background-color: #000">白色文字</td>
        </tr>
        <tr>
          <td>black-text</td>
          <td class="black-text">黑色文字</td>
        </tr>
        <tr>
          <td>gray-text</td>
          <td class="gray-text">灰色文字</td>
        </tr>
        <tr>
          <td>red-text</td>
          <td class="red-text">红色文字</td>
        </tr>
        <tr>
          <td>orange-text</td>
          <td class="orange-text">橙色文字</td>
        </tr>
        <tr>
          <td>green-text</td>
          <td class="green-text">绿色文字</td>
        </tr>
        <tr>
          <td>cyan-text</td>
          <td class="cyan-text">青色文字</td>
        </tr>
        <tr>
          <td>blue-text</td>
          <td class="blue-text">蓝色文字</td>
        </tr>
        <tr>
          <td>purple-text</td>
          <td class="purple-text">紫色文字</td>
        </tr>
        <tr>
          <td>magenta-text</td>
          <td class="magenta-text">洋红色文字</td>
        </tr>
        <tr>
          <td>aqua-text</td>
          <td class="aqua-text">水绿色文字</td>
        </tr>
        <tr>
          <td>lime-text</td>
          <td class="lime-text">绿黄色文字</td>
        </tr>
      </tbody>
    </table>
  </demoBlock>
</template>
<style lang="less" scoped>
table.api-table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #e1e1e1;
  width: 100%;
  margin: 8px 0 16px;
  font-size: 12px;
  th {
    white-space: nowrap;
    color: #5c6b77;
    font-weight: 500;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.02);
  }
  td {
    border: 1px solid #e1e1e1;
    padding: 6px 12px;
    text-align: left;
    background: white;
  }
}
</style>
